<template>
  <div class="layout">
    <div style="display: flex; justify-content: center">
      <Breadcrumb class="breadcrumb" :crumbs="crumbs"></Breadcrumb>
    </div>
    <div class="content">
      <div class="title">
        <div class="logo">
           <img :src="companyInfo.avatar" alt="" v-if="companyInfo.avatar">
           <span v-else>{{companyInfo.short}}</span>
          </div>
        <div>
          <p class="text">{{companyInfo.agencyName}}</p>
          <p class="des">
            <span>入驻时间：{{companyInfo.settledTime}}</span>
            <span class="des_end">阅读浏览：{{companyInfo.pvCount}}次</span>
          </p>
        </div>
      </div>
      <p class="s_title">服务信息</p>
      <table class="serve_table" border="1">
        <tr>
          <td>服务类型</td>
          <td>{{companyInfo.serviceTypeName}}</td>
          <td>运营时间</td>
          <td>{{companyInfo.runtimeBegin}} - {{companyInfo.runtimeEnd}}</td>
        </tr>
        <tr>
          <td>服务状态</td>
          <td>{{companyInfo.serviceState == 1? '休息中' : '运行中'}}</td>
           <td>服务地址</td>
          <td>{{companyInfo.preAddr + companyInfo.address}}</td>
        </tr>
        <tr>
         
          <td>对外服务电话</td>
          <td>{{companyInfo.phoneNumber}}</td>
          <td>总体评分</td>
          <td>{{getGrade(companyInfo.grade)}}</td>
        </tr>
        <tr>
          <td>服务描述</td>
          <td colspan="3">{{companyInfo.serviceDesc}}</td>
        </tr>
      </table>
      <p class="s_title">相关图片</p>
      <div class="pic_list" v-viewer>
        <!-- <img v-for="(item, index) in companyInfo.pictures" :key="index" :src="item.fileUrl" alt=""> -->
        <PublicImage :src="item.fileUrl" v-for="(item, index) in companyInfo.pictures" :key="index" :originalSize="true"></PublicImage>
      </div>
      <Buttons :buttons="buttons" @goBack="goBack"></Buttons>
    </div>
  </div>
</template>

<script>
import Breadcrumb from "@/components/breadcrumb";
import { getProductDetail } from "@/common/api/service.js";

export default {
  name: "service",
  components: { Breadcrumb },
  data() {
    return {
      buttons:[{text:"返回",size:"l",type:"normal",method:"goBack"}],
      companyInfo: {},
      crumbs: [
        {
          label: "门户首页",
          value: "index",
        },
        {
          label: "服务市场",
          value: "service"
        },
        {
          label: "已入驻商家",
          value: "serviceEnterFinish"
        },
        {
          label: "商家详情",
          value: "",
          choose: true,
        }
      ],
      pic_list: [
        "https://dss0.bdstatic.com/6Ox1bjeh1BF3odCf/it/u=3498108572,2302979843&fm=218&app=92&f=JPEG?w=360&h=225&s=0A40CF10C71253DE48DB54690300B078",
        "https://dss0.bdstatic.com/6Ox1bjeh1BF3odCf/it/u=3498108572,2302979843&fm=218&app=92&f=JPEG?w=360&h=225&s=0A40CF10C71253DE48DB54690300B078",
        "https://dss0.bdstatic.com/6Ox1bjeh1BF3odCf/it/u=3498108572,2302979843&fm=218&app=92&f=JPEG?w=360&h=225&s=0A40CF10C71253DE48DB54690300B078",
        "https://dss0.bdstatic.com/6Ox1bjeh1BF3odCf/it/u=3498108572,2302979843&fm=218&app=92&f=JPEG?w=360&h=225&s=0A40CF10C71253DE48DB54690300B078"
      ],
      agencyId: ''
    };
  },
  computed: {
    getlevel(){
      return function(data){
        switch (data){
          case data==1:
            return 'A';
          case data==2:
            return 'AA';
          case data==3:
            return 'AAA';
          case data==4:
            return 'AAAA';
          default:
            return 'AAAAA';     
        }
      }
    },
    getGrade(){
      return function(data){
        if(data){
          data = String(data)
          if(data.length==1){
            return data + '.0'
          }
          return data
        }
        
      }
    }
  },
  methods: {
    async getProductDetail(agencyId){
      let obj = {
        agencyId
      }
      let res = await getProductDetail(obj);
      // console.log('res11', res)
      if(res.status == 200) {
        if(!res.result.avatar){
          res.result.short = res.result.agencyName.substr(0,1)
        }
        this.companyInfo = res.result
        if(this.companyInfo && this.companyInfo.grade) {
          this.companyInfo.grade = Math.round(this.companyInfo.grade * 10) / 10
        }
         console.log('res11', this.companyInfo)
      }
    },
     /**
			 * 返回上一页
			 */
    goBack(){
      this.$router.back();
    }
  },
  mounted() {},
  activated() {},
  created() {
    // 通过路由获取产品id
    if (this.$route.query.agencyId) {
      this.agencyId = this.$route.query.agencyId;
      this.getProductDetail(this.$route.query.agencyId);
    }
  },
};
</script>

<style lang="scss" scoped>
.breadcrumb {
  width: 1200px;
  margin: 20px 0;
}

.layout {
  min-height: 100vh;
  position: relative;
  padding-bottom: 150px;
  box-sizing: border-box;
}

.content {
  width: 1200px;
  margin: auto;
  text-align: left;
  padding-bottom: 40px;
  .title {
    display: flex;
    align-items: center;
    margin-bottom: 25px;
    .logo {
      padding: 13px;
      border: 1px solid #045DB9;
      border-radius: 8px;
      margin-right: 20px;
      width: 82px;
      height: 82px;
      box-sizing: border-box;
      font-size: 30px;
      font-weight: bold;
      text-align: center;
      line-height: 60px;
      background: #045DB9;
      color: #fff;
      img {
        width: 56px;
        height: 56px;
        object-fit: cover;
        display: block;
      }
    }
    .text {
      font-size: 25px;
      font-weight: bold;
      margin-bottom: 5px;
    }
    .des {
      display: flex;
      color: #999999;
      font-size: 12px;
      .des_end {
        margin-left: 30px;
      }
    }
  }
  .s_title {
    color: #045DB9;
    font-size: 20px;
    padding-bottom: 13px;
    border-bottom: 2px solid #045DB9;
    margin-bottom: 20px;
  }
  .serve_table {
    width: 100%;
    border: 1px solid #EEEEEE;
    font-size: 15px;
    margin-bottom: 40px;
    table-layout: fixed;
    td {
      padding: 15px;
      &:nth-child(2n + 1) {
        text-align: center;
        background-color: #f4f4f4;
        width: 150px;
      }
      width: 300px;
      word-wrap:break-word
    }
  }
  .pic_list {
    display: flex;
    align-items: center;
    margin-right: -20px;
    img {
      width: 285px;
      margin-right: 20px;
      object-fit: cover;
      height: 190px;
      display: block;
    }
  }
  .back_btn {
    width: 120px;
    height: 40px;
    background: #F1F2F4;
    border-radius: 3px;
    color: #045DB9;
    font-size: 16px;
    line-height: 40px;
    margin: 40px auto 0;
    text-align: center;
    display: block;
  }
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
}
</style>
